<template>
  <ModuleWrap
    title="告警统计"
    class="flex w-full flex-1 flex-col justify-center overflow-hidden"
    :module-style="{ overflow: 'hidden' }"
  >
    <div class="flex h-full w-full flex-col">
      <Item :info="alarmCount" class="mb-[16px]"></Item>
      <Item :info="alarmTrigger" class="mb-[8px]"></Item>
      <div class="history-alarm flex w-full flex-1 flex-col overflow-hidden">
        <div class="item-center my-[18px] flex h-fit w-full justify-between">
          <div class="flex items-center text-[14px]">
            <img
              src="/static/screen/alarm-history.png"
              class="mr-[8px] h-[14px] w-[14px]"
            />
            <span>历史告警</span>
          </div>
          <div class="relative mb-0 w-[120px]" ref="selectRef">
            <Select
              :options="_alarmTypeOptions"
              v-model:value="alarmType"
              @change="onChange"
              class="relative w-full"
              size="small"
              :getPopupContainer="() => selectRef"
            ></Select>
          </div>
        </div>
        <TableWrap :data-source="historyList" :columns="columns"> </TableWrap>
      </div>
    </div>
  </ModuleWrap>
</template>

<script setup lang="tsx">
import { computed, ref, shallowRef, useId, watch } from 'vue';
import { alertStatistics, historyAlert } from '@/pages/screen/api';
import { useDicts } from '@boeyo/portal';
import { BoTableProps } from '@boeyo/ui';
import { Select } from 'ant-design-vue';
import { eventBus } from '@/utils/eventMitt';
import ModuleWrap from '../ModuleWrap.vue';
import TableWrap from '../TableWrap.vue';
import Item from './Item.vue';

const selectRef = shallowRef();

const params = ref(history.state.params || '');
// 告警统计
const statusAlert = ref(0); //设备状态警告
const deviceTriggerAlert = ref(0); //设备触发告警
const structureTriggerAlert = ref(0); //台阵触发告警
const earthquakeAlert = ref(0); //地震触发告警
//历史告警
const historyList = ref([]);

// 历史告警
const dictArr = ['alarm_type'];
const { alarmTypeEnum, alarmTypeOptions } = useDicts(dictArr);

const _alarmTypeOptions = computed(() => [
  { label: '全部告警', value: '' },
  ...alarmTypeOptions.value,
]);

// 告警统计
const alarmCount = computed(() => [
  { num: statusAlert.value, title: '设备状态警告' },
  { num: deviceTriggerAlert.value, title: '设备触发警告' },
]);
const alarmTrigger = computed(() => [
  { num: structureTriggerAlert.value, title: '区域触发告警' },
  { num: earthquakeAlert.value, title: '地震触发告警' },
]);

const alarmType = ref('');
const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '告警时间',
    dataIndex: 'alarmTime',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '告警类型',
    dataIndex: 'alarmType',
    customRender({ record }) {
      return alarmTypeEnum.value?.[record?.alarmType]?.text || '';
    },
    ellipsis: true,
    align: 'center',
  },
  {
    title: '所属监测阵',
    dataIndex: 'structureName',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '触发测点名称',
    dataIndex: 'pointName',
    ellipsis: true,
    align: 'center',
  },
]);

// 下拉框修改
const onChange = (value) => {
  historyAlert({
    ...params.value,
    alarmType: value,
  }).then(({ data }) => {
    historyList.value = data || [];
  });
};

const init = async () => {
  // 告警统计
  alertStatistics(params.value).then(({ data }) => {
    statusAlert.value = data.statusAlert;
    deviceTriggerAlert.value = data.deviceTriggerAlert;
    structureTriggerAlert.value = data.structureTriggerAlert;
    earthquakeAlert.value = data.earthquakeAlert;
  });
  // 历史告警统计
  historyAlert({ ...params.value, alarmType: alarmType.value }).then(
    ({ data }) => {
      historyList.value = data || [];
    },
  );
};

init();

// 监听左侧下拉框变化:重新获取测点信息
eventBus.on('changeStructure', (data: any) => {
  params.value = data.params;
});
watch(() => params.value, init, {
  deep: true,
});
</script>

<style lang="scss"></style>
